<template>
  <div :class="$style.indicator">
    <ContentWrap>
      <FormContainer :column="3">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="indexName" label="指标名称">
            <el-input v-model="formData.indexName" clearable placeholder="请输入指标名称"></el-input>
          </el-form-item>
          <el-form-item prop="state" label="状态">
            <el-select v-model="formData.state" clearable placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="启用" :value="1"></el-option>
              <el-option label="停用" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <Button type="primary" @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <!-- <div style="text-align:right">
        <AddOrEdit type="primary" label="新增" title="新增" @refresh="queryHandle('onPage')"></AddOrEdit>
        <Button type="primary" @click="batEnableOrDisableHandle('enable')">启用</Button>
        <Button type="primary" @click="batEnableOrDisableHandle('disable')">停用</Button>
      </div> -->
      <table-box
        ref="table"
        no-request
        :table-config="tableConfig"
        :other-filters="otherFilters"
        @selection-change="selectionChange"
      >
        <el-table-column slot="before" type="selection" align="center" width="40" />
      </table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import { enableIndex, disableIndex } from '@/api/serviceQuality'
import AddOrEdit from './components/AddOrEdit'
export default {
  name: 'Indicator',
  components: {
    ContentWrap,
    FormContainer
    // AddOrEdit
  },
  data() {
    return {
      otherFilters: [],
      selectedAry: [],
      formData: {
        indexName: '',
        state: 1
      },
      formRules: {},
      tableConfig: {
        interfacePath: '/call-center/api/v1/appraise/appraiseIndex/page',
        pageFlag: true,
        hideFuncBar: true,
        sort: 'orderNumber',
        order: 'asc',
        // 表格字段动态配置
        setting: [
          {
            type: 'index',
            width: '80',
            align: 'center',
            label: '序号',
            formatData: (val) => {
              return val.keyIndex + 1
            }
          },
          {
            prop: 'indexName',
            label: '评价内容描述'
          },
          {
            prop: 'state',
            label: '启用状态',
            formatData: v => {
              return v.state === 1 ? '启用' : '停用'
            }
          },
          {
            prop: 'orderNumber',
            label: '排序'
          },
          {
            prop: '',
            label: '操作',
            render: (_, row) => {
              return (
                // <div>
                //   <Button type='text' onClick={this.enableOrDisable.bind(this, row)}>{ row.state === 1 ? '停用' : '启用'}</Button>
                //   <AddOrEdit type='text' label='修改' title='修改服务评价指标' row={row} onRefresh={this.queryHandle.bind(this, 'onPage')}>修改</AddOrEdit>
                // </div>
                <div>
                  <AddOrEdit type='text' label='修改' title='修改服务评价指标' row={row} onRefresh={this.queryHandle.bind(this, 'onPage')}>修改</AddOrEdit>
                </div>
              )
            }
          }
        ]
      }
    }
  },
  methods: {
    // 查询
    queryHandle(type) {
      return this.$refs.form.validate().then(() => {
        this.otherFilters = this.$genOtherFilters(this.formData, this.$genRule('=', ['state'], this.$genRule('like', ['indexName'])))
        this.$nextTick(() => {
          this.$refs.table.initTableData(type)
        })
      })
    },
    // 启用/停用
    enableOrDisable(row) {
      let ajax = enableIndex
      if (row.state === 1) {
        ajax = disableIndex
      }
      return ajax([row]).then(res => {
        this.$message.success('操作成功！')
        this.queryHandle('onPage')
      })
    },
    // 批量启用
    batEnableOrDisableHandle(type) {
      return this.$checkSelected(this.selectedAry, false).then(() => {
        let ajax = enableIndex
        if (type === 'disable') {
          ajax = disableIndex
        }
        return ajax(this.selectedAry).then(res => {
          this.$message.success('操作成功！')
          this.queryHandle('onPage')
        })
      })
    },
    // 表格选中事件
    selectionChange(val) {
      this.selectedAry = val
    }
  }
}
</script>
<style lang='scss' module>
.indicator{
  tr{
    background-color: white !important;
  }
}
</style>
